---
type: tutorial
unitTitle: 创建和设计 Astro 组件
title: '第三单元：组件'
description: |-
  教程：搭建你的 Astro 博客 -
  构建 Astro 组件以复用你网站上常见元素的代码
head:
  - tag: title
    content: 搭建博客教程：第三单元 - 组件 | Docs
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';

你已经可以用 `.astro` 和 `.md` 文件在你的网站上生成出整个页面了，现在是时候通过 Astro 组件来创建并复用一些 HTML 片段了！

## 接下来

在本单元中，你将学习如何创建 **Astro 组件** 以在整个网站上重复使用常见元素的代码。

你将构建：
- 显示页面链接菜单的导航组件
- 包含在每个页面底部的页脚组件
- 在页脚中使用的社交媒体组件，链接到个人资料页面
- 一个可交互的菜单组件，用于在移动设备上切换导航


在此过程中，你将使用 CSS 和 JavaScript 来实现自适应屏幕尺寸变化和用户输入的响应式设计。



<Box icon="check-list">
## 任务清单

<Checklist>
- [ ] 我准备好创建一些 Astro 组件了！
</Checklist>
</Box>
